<template>
  <view class="search">
    <view class="input">
      <uni-search-bar v-model="state.kw" bgColor="#dcdcdc" radius="5" placeholder="搜索" clearButton="auto"
                      cancelButton="none" @confirm="search"
                      @cancel="cancel"/>
    </view>
    <view class="msg">
      <text>消息</text>
    </view>
  </view>
</template>
<script setup lang="ts">
import {ref} from 'vue'

const state = ref({
  kw: ""
})
const cancel = (res: any) => {
  uni.showToast({
    title: '点击取消，输入值为：' + res.value,
    icon: 'none'
  })
}

const search = (res: any) => {
  // 导航到search页面
  uni.navigateTo({
    url: "/pages/search/list?kw=" + res.value
  })
}
</script>
<style lang="scss">
.search {
  display: flex;
  justify-content: space-between;
  padding: 10px;
  .input {
    width: 85%;
  }
  .msg {
    height: 56px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 15%;
  }
}

</style>
